<template>
  <div id="main">
    <div class="box">
      <img src="../../../ps原图/assets/img/login/normal.png" alt="" class="topImg" />
      <van-tabs v-model="active" animated>
        <van-tab title="登录">
          <van-form @submit="onSubmit">
            <van-field
              v-model="sms"
              name="手机号"
              label="手机号"
              placeholder="请填写手机号"
            />
            <van-field
              v-model="yzm"
              type="password"
              name="验证码"
              label="请填写验证码"
              placeholder="请填写验证码"
            />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >登录</van-button
              >
            </div>
            <p class="passd">账号密码登录</p>
            <van-divider
              :style="{
                color: '#1989fa',
                borderColor: '#1989fa',
                padding: '0 16px',
              }"
              >其他登录方式</van-divider
            >
            <div class="footer">
              <div>
                <img src="../../../ps原图/assets/img/login/wx.png" alt="" />
                <p>微信登录</p>
              </div>
              <div>
                <img src="../../../ps原图/assets/img/login/qq.png" alt="" />
                <p>QQ登录</p>
              </div>
            </div>
            <div class="fonts">
              <p>温馨提示：</p>
              <p>未注册的手机号，登录时将自动注册,且代表同意</p>
              <p>用户协议、隐私策略</p>
            </div>
          </van-form>
        </van-tab>
        <van-tab title="注册">
          <van-form @submit="onSubmit">
            <van-field
              v-model="tel"
              name="手机号"
              label="手机号"
              placeholder="请填写手机号"
            />
            <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="请输入密码(不少于6位)"
            />
            <div style="margin: 16px">
              <van-button
                round
                block
                type="info"
                native-type="submit"
                @click="onzhuce"
                >注册</van-button
              >
            </div>
            <van-divider
              :style="{
                color: '#1989fa',
                borderColor: '#1989fa',
                padding: '0 16px',
              }"
              >其他登录方式</van-divider
            >
            <div class="footer">
              <div>
                <img src="../../../ps原图/assets/img/login/wx.png" alt="" />
                <p>微信登录</p>
              </div>
              <div>
                <img src="../../../ps原图/assets/img/login/qq.png" alt="" />
                <p>QQ登录</p>
              </div>
            </div>
            <div class="fonts">
              <p>温馨提示：</p>
              <p>未注册的手机号，登录时将自动注册,且代表同意</p>
              <p>用户协议、隐私策略</p>
            </div>
          </van-form>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";

export default {
  name: "LoginView",
  data() {
    return {
      active: 0,
      sms: "",
      yzm: "",
      tel: "",
      password: "",
    };
  },
  methods: {
    onSubmit() {
      // console.log("submit", values);
      let _this = this;
      let obj = {
        sms: _this.sms,
        yzm: _this.yzm,
      };
      console.log(obj);
      this.$http.postLogin(obj).then((res) => {
        if (res.data.data.code == 200) {
          this.$router.push("/homeview");
        }
      });
    },
    onzhuce() {
      let _this = this;
      console.log(_this.tel);
      let obj = {
        tel: _this.tel,
        password: _this.password,
      };
      if (obj.password.length >= 6) {
        this.$http.postRegist(obj).then((res) => {
          if (res.data.data.code == 200) {
            Dialog.alert({
              message: "注册成功",
            }).then(() => {
              // on close
              this.active = 0;
              localStorage.setItem("token", JSON.stringify(obj));
            });
          } else {
            Dialog.alert({
              message: "注册失败",
            });
          }
        });
      }else{
        Dialog.alert({
              message: "密码最少为6位",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#main {
  width: 100vw;
  height: 100vh;
  background: url("../../../ps原图/assets/img/login/back2.jpg") no-repeat;
  background-size: cover;
  overflow: hidden;
  .box {
    width: 90%;
    height: 70%;
    margin: 2rem auto 0;
    background: #fff;
    border-radius: 10px;
    position: relative;
    .topImg {
      position: absolute;
      top: -0.6rem;
      left: 50%;
      transform: translateX(-40px);
      width: 1.5rem;
      height: 1.5rem;
    }
    .van-tabs {
      padding-top: 1rem;
    }
    .passd {
      margin: 0 0.2rem;
      font-size: 0.3rem;
    }
    .van-divider {
      margin: 0.1rem;
    }
    .footer {
      display: flex;
      justify-content: space-evenly;
      div {
        text-align: center;
        img {
          width: 0.5rem;
          height: 0.5rem;
        }
        p {
          margin: 0;
          font-size: 0.28rem;
        }
      }
    }
    .fonts {
      p {
        font-size: 0.24rem;
        margin: 0.1rem 0;
        text-align: left;
        margin-left: 0.5rem;
      }
      :nth-child(3) {
        color: green;
      }
    }
  }
}
</style>